import React, { useEffect } from 'react';

const DifyChatbot = () => {
  useEffect(() => {
    // 设置配置
    (window as any).difyChatbotConfig = {
      token: 'rpP4rNIkNL21qyZO',
      baseUrl: 'http://10.1.66.22',
      systemVariables: {
        // user_id: 'YOU CAN DEFINE USER ID HERE',
      },
    };

    // 创建样式
    const style = document.createElement('style');
    style.textContent = `
      #dify-chatbot-bubble-button {
        background-color: #1C64F2 !important;
      }
      #dify-chatbot-bubble-window {
        width: 24rem !important;
        height: 40rem !important;
      }
    `;
    document.head.appendChild(style);

    // 加载脚本
    const script = document.createElement('script');
    script.src = 'http://10.1.66.22/embed.min.js';
    script.id = 'rpP4rNIkNL21qyZO';
    script.defer = true;
    document.body.appendChild(script);

    // 清理函数
    return () => {
      document.head.removeChild(style);
      document.body.removeChild(script);
      delete (window as any).difyChatbotConfig;
    };
  }, []);

  return null; // 这个组件不需要渲染任何内容
};

export default DifyChatbot;
